{% extends 'base.html' %}

{% block title %}
Product Information | Online Retail POS
{% endblock %}

{% block nav-item %}
<div class="mb-0 font-weight-bold  h5 text-gray-500 text-uppercase p-3 "> Product Information </div>
{% endblock %}

{% block content %}
<div class="row" style="width: 100%;padding-right: 0px;">
        <form class="form" action="{{ request.get_full_path }}" method = "POST" style="width:100%;padding-bottom: 10px;text-align: center;padding:10px;padding-top: 15px;">
            {% csrf_token %}
            <div class="row" style="justify-content: center;">
            {% for field in form %}
            <ul style="padding-left:0;width:54%"> {{ field }} </ul>
            {% endfor %}
            </div>
            <input class="btn btn-lg btn-primary"  style="width:60%;margin-top: 10px;" id="submit-barcode" type="submit" value="Submit">
        </form>
</div>
<div class="row col-lg-12" style="justify-content: center;">
    {% if notFound %}
        <script>
            window.alert("NO PRODUCT FOUND")
        </script>
    {% endif%}
    {% if obj %}
    <div class="card shadow" style="width:80%;margin-top:50px">
        <div class="card-header py-3">
            <h6 class="m-2 font-weight-bold text-primary h3">Product Information - {{ obj.get_fields.0.1 }}</h6>
        </div>
        <div class="card-body " style="width:100%;">
            <div class="row h1 text-danger  " style="justify-content:end;padding-right: 10%;">
                Price: {{ obj.get_fields.2.1 }}
            </div>
            <div class="table-responsive mt-4" style="width:100%;">
                <table class="table table-bordered table-hover h5 text-gray-900 " style="width:100%;">
                    <!-- <table class="table table-hover table-bordered h1 font-weight-bold text-gray-800" style="width:100%;"> -->
                    <tbody>
                        {% for name, value in obj.get_fields %}
                        <tr height="50px" >
                            <td width="35%">{{ name }}</td>
                            <td>{{ value }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}
